<!-- 获取当地天气 -->
<template>
	<div class="flex-center">
		<skycon v-if="iconCondition" :condition="iconCondition" color="#08C7F1" width="24" height="24" ></skycon>
		<div v-if="iconCondition" class="flex-center font-22">
			<span>{{ weather.temperature }}℃ </span>
			<span>{{ weather.weather }}</span>
			<span>{{nowYear}}-{{nowMouth}}-{{nowDate}} {{' '+hms}}&nbsp;&nbsp;{{nowWeek}}</span>
		</div>
	</div>
</template>
<script>
import axios from 'axios';
export default {
	data() {
		return {
			key: '5e0d711dc520a746549847425fc5465f', //小在自己的key，建议自己申请
			weather: {}, //用于存放天气相关的数据
			iconCondition: null, //icon值
			nowYear: '',//年
			nowMouth: '',//月
			nowDate: '',
			nowWeek: '',//周几
			hms: '',//时分秒
			timer: '', //定义一个定时器的变量
		};
	},
	created() {
		this.getLocationInfo();
		this.timer = setInterval(this.getdate, 1000)
	},
	methods: {
		// 获取当前系统时间
		getdate() {
			const year = new Date().getFullYear()
			const mounth =
				      new Date().getMonth() + 1 < 10
					      ? '0' + (new Date().getMonth() + 1)
					      : new Date().getMonth() + 1
			const date =
				      new Date().getDate() < 10
					      ? '0' + new Date().getDate()
					      : new Date().getDate()
			const hh = new Date().getHours()
			const mf =
				      new Date().getMinutes() < 10
					      ? '0' + new Date().getMinutes()
					      : new Date().getMinutes()
			const ss =
				      new Date().getSeconds() < 10
					      ? '0' + new Date().getSeconds()
					      : new Date().getSeconds()
			const week = new Date().getDay()
			if (week === 1) {
				this.nowWeek = '星期一'
			} else if (week === 2) {
				this.nowWeek = '星期二'
			} else if (week === 3) {
				this.nowWeek = '星期三'
			} else if (week === 4) {
				this.nowWeek = '星期四'
			} else if (week === 5) {
				this.nowWeek = '星期五'
			} else if (week === 6) {
				this.nowWeek = '星期六'
			} else if (week === 27) {
				this.nowWeek = '星期日'
			}
			this.nowYear = year
			this.nowMouth = mounth
			this.nowDate = date
			this.hms = hh + ':' + mf + ':' + ss
		},
		// 获取用户位置信息
		async getLocationInfo() {
			const params = {
				key: this.key,
			};
			const { data } = await axios.get('https://restapi.amap.com/v3/ip', { params });
			// data.adcode值为获取天气需要的city值
			this.getWeather(data.adcode);
		},
		// 获取天气详情
		async getWeather(adcode) {
			const params = {
				key: this.key,
				city: adcode,
			};
			const { data } = await axios.get(`https://restapi.amap.com/v3/weather/weatherInfo`, { params });
			
			this.weather = data.lives[0];
			this.iconCondition = this.setWeatherIcon(data.lives[0]?data.lives[0].weather:[]);
		},
		// 设置icon
		setWeatherIcon(weather) {
			// 只处理了基础的天气，可以继续精细化处理
			if (weather === '晴') {
				return 'clear-day';
			} else if (weather.includes('云')) {
				return 'partly-cloudy-day';
			} else if (weather.includes('风')) {
				return 'wind';
			} else if (weather.includes('雨')) {
				return 'rain';
			} else if (weather.includes('雪')) {
				return 'snow';
			} else if (weather.includes('雾')) {
				return 'fog';
			}
			return 'cloudy';
		},
	},
	beforeDestroy() {
		if (this.timer) {
			clearInterval(this.timer) // 在Vue实例销毁前，清除定时器
		}
	},
};
</script>
<style lang="scss" scoped>
.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}
.font-22 {
	font-size: 16px;
	color:#08C7F1;
	span    {
		margin-left: 6px;
	}
}
</style>